<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .main {
        width: 500px;
        padding: 10px;
        background-color: #ccc;
      }

      .article {
        height: 200px;
        background-color: green;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <!-- 
    组件的组合
      组件可以嵌套使用。A组件中可以使用B组件
   -->
    <div id="app">
      <my-main></my-main>
    </div>

    <script src="../lib/vue-3.js"></script>
    <script>
      const Main = {
        template: `
          <div class="main">
            <my-article></my-article>
            <my-article></my-article>
          </div>
        `,
      };

      const Article = {
        template: `
          <div class="article"></div>
        `,
      };

      // App 组件，是给到 createApp 方法去使用的，它比较特殊
      //  1. 它无需注册
      //  2. 它无需 template
      //      无template
      //        会使用挂载点元素的innerHTML作为template
      //      有template
      //        会使用配置的template,在挂载完成替换到挂载点
      const App = {
        // template: `
        //   <div>App</div>
        // `,
      };

      const { createApp } = Vue;

      const app = createApp(App);

      app.component("my-main", Main);
      app.component("my-article", Article);

      // 挂载
      app.mount("#app");
    </script>
  </body>
</html>
